<template>
    <div>
        <div class="row">
            <div v-for="column in columnList" :key="column._id" class="col-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <img :src="column.avatar && column.avatar.url " class="border rounded-circle border-light  my-3" :alt="column.title">
                        <h5 class="card-title">{{ column.title }}</h5>
                        <p class="card-text text-left">{{ column.description }}</p>
                        <RouterLink :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</RouterLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {defineProps,PropType,computed} from 'vue';
import { RouterLink } from 'vue-router';
import { ColumnProps } from '@/utlis/type';
//使用自定义属性获取父组件传递的数据
const props = defineProps({
    list: {
        //将一个构造函数断言成一个类型
        type: Array as PropType<ColumnProps[]>,
        required: true,
    }
})
const columnList = computed(() => {
    return props.list.map(column => {
        // 如果 avatar 不存在，则初始化
        if (!column.avatar) {
            column.avatar = {
                url: require('@/assets/column.jpg')
            };
        } else {
            // 如果 column.avatar.url 存在，则添加处理；否则提供一个默认值
            column.avatar.url = column.avatar.url 
                ? column.avatar.url + '?x-oss-process=image/resize,m_pad,h_50,w_50'
                : require('@/assets/column.jpg') + '?x-oss-process=image/resize,m_pad,h_50,w_50';
        }
        return column;
    });
});

</script>

<style scoped>
.card-body img{
    width: 50px;
    height: 50px;
}
</style>